<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>the photogrammar project</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>photogrammar test</title>
  <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
  <style>body,html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;} #map {height:100%; top:50px}</style>
  <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
  <link  href="css/style2.css" rel="stylesheet" type="text/css">
  <link  href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="js/leaflet.js"></script>
  <script type="text/javascript" src="js/wax.leaf.min-6.2.3-touched.js"></script>
  <script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
  <script type="text/javascript" src="dist/cartodb-popup-min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="css/style3.css"/>

<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>

  <script type="text/javascript">
    function initialize() {
      var map = new L.Map('map').setView(new L.LatLng(46.860598, -68.011971), 5)
        , mapboxUrl = 'http://{s}.tiles.mapbox.com/v3/cartodb.map-1nh578vv/{z}/{x}/{y}.png'
        , mapbox = new L.TileLayer(mapboxUrl, {maxZoom: 18, attribution: ""});
      map.addLayer(mapbox,true);

      // Create a CartoDB popup
      var popupCount = new L.CartoDBPopup();

      // Now the CartoDB layer, the counties
      county = new L.CartoDBLayer({
        map: map,
        user_name:"statmath",
        table_name: 'uscounties',
        query: "SELECT cartodb_id,the_geom,the_geom_webmercator,name,state_name FROM {{table_name}}",
        tile_style: "#{{table_name}}{polygon-fill: rgba(128,128,128,1) }",
        interactivity: "name, state_name",
        featureOver: function(ev,latlng,pos,data) {
          document.body.style.cursor = "pointer";
        },
        featureOut: function() {
          document.body.style.cursor = "default";
        },
        featureClick: function(ev,latlng,pos,data) {
          ev.stopPropagation();
          // Set popup content
          popupCount.setContent(data);

          // Set latlng
          popupCount.setLatLng(latlng);

          // Show it!
          map.openPopup(popupCount);
        },
        auto_bound: false,
        debug: false
      });
      map.addLayer(county);

      // Create a CartoDB popup
      var popup = new L.CartoDBPopup();

      // Now the CartoDB layer, the earthquakes
      earthquakes = new L.CartoDBLayer({
        map: map,
        user_name:"statmath",
        table_name: 'fsadata',
        query: "SELECT cartodb_id,the_geom,the_geom_webmercator,v2 FROM {{table_name}}",
        tile_style: "#{{table_name}}{marker-opacity:0.5; marker-fill:#006BB4; marker-allow-overlap:false; marker-width:5; marker-height:5}",
        interactivity: "cartodb_id, v2",
        featureOver: function(ev,latlng,pos,data) {
          document.body.style.cursor = "pointer";
        },
        featureOut: function() {
          document.body.style.cursor = "default";
        },
        featureClick: function(ev,latlng,pos,data) {
          ev.stopPropagation();
          // Set popup content
          popup.setContent(data);

          // Set latlng
          popup.setLatLng(latlng);

          // Show it!
          map.openPopup(popup);
        },
        auto_bound: false,
        debug: true
      });
      // Adding layer to map
      map.addLayer(earthquakes);
    }

    function onChange() {      
      if ($('input[type="checkbox"]').attr("checked")) {
        county.show()
      } else {
        county.hide()
      }
    }
  </script>
</head>
<body onload="initialize()">

<div class="menu">
    <ul style="float:left">
      <li style="padding-top:12px; padding-left:20px; font:40px/40px Didot; color: #FFFFFF;">
        the photogrammar project
        </li>
    </ul>
    <ul style="float:right">
      <li class="single-link">
        <a href="index.html">Home</a>
        </li>
      <li class="current">
        <a href="map.html">Map</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a href="">Browse</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a href="asearch.php">Search</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a href="blog/index.php">About</a>
        </li>
</div>
  <div id="map" style="top:0px"></div>
  <form class="example" style="top:100px">
    <input type="checkbox" checked onchange="onChange()"/>
    <label class="small">Counties On/Off</label>
  </form>
</body>
</html>
